<template>
	<div>
		<div style="margin-bottom: 10px;display: flex;">
			<el-button icon="el-icon-plus" type="danger" @click="dialogVisible = true">添加</el-button>
			<div style="display: flex;margin-left: 50px;">
				<el-input placeholder="请输入用户名"></el-input>
				<el-input placeholder="请输入年龄"></el-input>
				<el-input placeholder="请输入性别"></el-input>
				<el-button icon="el-icon-search" type="danger">搜索</el-button>
			</div>
			</div>
	<el-table highlight-current-row @current-change="handleCurrentChange" border stripe :data="tableData" height="420"
		style="width: 100%">
		<el-table-column type="selection"  label="行号" fixed="left">
		</el-table-column>
		<el-table-column prop="userId" label="用户ID" fixed="left">
		</el-table-column>
		<el-table-column prop="userName" label="姓名"  fixed="left">
		</el-table-column>
		<el-table-column prop="userPwd" label="密码" >
		</el-table-column>
		<el-table-column prop="userAge" label="年龄">
		</el-table-column>
		<el-table-column prop="userSex" label="性别">
		</el-table-column>
		<el-table-column prop="createTime" label="创建时间"  width="200">
		</el-table-column>
		<el-table-column prop="updateTime" label="更新时间" width="200">
		</el-table-column>


		<el-table-column label="操作" fixed="right" width="200">
			<template slot-scope="scope">
				<el-button icon="el-icon-edit" style="margin-left: 20px;" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination 
	@size-change="handleSizeChange" 
	@current-change="handleCurrentChange" 
	:current-page="currentPage"
		:page-sizes="[4, 5, 6, 7]" :page-size="4" layout="total, sizes, prev, pager, next, jumper"
		:total="total">
	</el-pagination>

	<el-dialog
	  title="用户信息"
	  :visible.sync="dialogVisible"
	  width="30%"
	 >
	
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
		<el-form-item prop="userName">
			<el-input v-model="ruleForm.userName" placeholder="请输入用户名" prefix-icon="el-icon-user">
			</el-input>
		</el-form-item>
		<el-form-item prop="userPwd">
			<el-input v-model="ruleForm.userPwd" placeholder="请输入密码" prefix-icon="el-icon-lock">
			</el-input>
		</el-form-item>
		<el-form-item prop="userAge">
			<el-input v-model="ruleForm.userAge" placeholder="请输入年龄" prefix-icon="el-icon-lock">
			</el-input>
		</el-form-item>
		
  <el-form-item label="性别">
    <el-radio-group v-model="ruleForm.userSex">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
	
	</el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="sumitUserInfo()">确 定</el-button>
	  </span>
	</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios';
	 const service = axios.create({
	   baseURL: '/news' // api base_url
	 })
	export default {
		data() {
			return {
				currentPage:1,
				pageSize:4,
				total:200,
				tableData:[],
				dialogVisible: false,
				ruleForm: {
					userName: '',
					userPwd: '',
					userSex:'',
					userAge:0
				},
				rules: {
					userName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '用户名长度不能小于3',
							trigger: 'blur'
						}
					],
					userPwd: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 1,
							message: '密码不能为空',
							trigger: 'blur'
						}
					],
					userPwd: [{
							required: true,
							message: '请输入年龄',
							trigger: 'blur'
						}
					]
				}

			}
		},
		created() {
			this.getPageData();
		},
		methods: {
			addUser(){
				
			},
			sumitUserInfo(){
				//提交数据
				this.dialogVisible = false;
			},
			getPageData(){
				let _that = this;
				service({
				  method: 'get',
				  url: '/user/selectByPage.action?page='+this.currentPage+'&limit='+this.pageSize
				}).then(function(response) {
					console.log(response);
					if(response.data.code == 200){
						//console.log(response);
						_that.total = response.data.data.total;
						_that.tableData = response.data.data.data;
						console.log(response.data.data.data);
						console.log(response.data.data.count);
					}else{
						alert(response.data.msg)
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			handleCurrentChange(currentRow, oldCurrentRow) {
				console.log(currentRow);
				console.log(oldCurrentRow);
			},
			handleEdit(index, row) {
				console.log("编辑第" + index + "行", row)
			},
			handleDelete(index, row) {
				console.log("删除第" + index + "行", row)
			},
			handleSizeChange(pageSize) {
				this.pageSize = pageSize;
				this.getPageData();
				console.log(`每页 ${pageSize} 条`);
				//
			},
			handleCurrentChange(pageNumber) {
				this.currentPage = pageNumber;
				this.getPageData();
				console.log(`当前页: ${pageNumber}`);
			}
		}
	}
</script>
<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
